<template>
  <div class="Score">
    <div class="Score-x">
      <div>
        <span :class="[score < 1 ? 'xleft' : 'xleftActive']"></span>
        <span :class="[score < 2 ? 'xright' : 'xrightActive']"></span>
      </div>
      <div>
        <span :class="[score < 3 ? 'xleft' : 'xleftActive']"></span>
        <span :class="[score < 4 ? 'xright' : 'xrightActive']"></span>
      </div>
      <div>
        <span :class="[score < 5 ? 'xleft' : 'xleftActive']"></span>
        <span :class="[score < 6 ? 'xright' : 'xrightActive']"></span>
      </div>
      <div>
        <span :class="[score < 7 ? 'xleft' : 'xleftActive']"></span>
        <span :class="[score < 8 ? 'xright' : 'xrightActive']"></span>
      </div>
      <div>
        <span :class="[score < 9 ? 'xleft' : 'xleftActive']"></span>
        <span :class="[score < 10 ? 'xright' : 'xrightActive']"></span>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.Score-x {
  display: flex;
  height: 20px;
  justify-content: center;
  div {
    width: 16px;
    height: 16px;
    display: flex;
    margin: 0 2px;
    span {
      display: inline-block;
      width: 8px;
      height: 16px;
    }
    .xleft {
      background: url("../../assets/images/xleft.png");
      background-size: 8px 16px;
    }
    .xright {
      background: url("../../assets/images/xright.png");
      background-size: 8px 16px;
    }
    .xleftActive {
      background: url("../../assets/images/xleft-active.png");
      background-size: 8px 16px;
    }
    .xrightActive {
      background: url("../../assets/images/xright-active.png");
      background-size: 8px 16px;
    }
  }
}
</style>
<script>
export default {
  props: ["scorevalue"],
  data() {
    return {
      score: 0, // 分数(也可以从父组件传递) => 渲染的分数
    };
  },

  created() {
    this.score = this.scorevalue;
  },
};
</script>
